<template>
  <div class="nav">
    <div class="nav-container">
      <ul>
        <li><span>首页</span></li>
        <li><span>泳装</span></li>
        <li><span>比基尼</span></li>
        <li><span>披肩</span></li>
        <li><span>适用人群</span></li>
        <li class="xian"><span>|</span></li>
      </ul>
      <ul>
        <li><span>跨境专供</span></li>
        <li><span>流行趋势</span></li>
        <li><span>品牌设计</span></li>
      </ul>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'nav'
    }
</script>

<style scoped>
  .nav{
    width: 100%;
    background: #fff;
    height: 60px;
  }
  .nav-container{
    height: 100%;
    width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .nav-container>ul{
    display:flex ;
    flex-direction: row;
  }
  .nav-container>ul>li{
    padding-right: 32px;
    padding-left: 32px;
    font-size: 16px;
    color:#2b3040;
    font-family: "Microsoft YaHei";
  }

</style>
